import 'package:flutter/material.dart';
import './tabs2/DetailPage.dart';

/// 仿闲鱼底部导航栏带有中间凸起图标
/// https://github.com/hanlin19900610/flutter_bottom_navigation_bar
class TabNPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TabNPage();
  }
}

class _TabNPage extends State<TabNPage> with SingleTickerProviderStateMixin {
  PageController pageController;
  int tabIndex = 0;
  String bigImage = "assets/icons/ic_nav_tweet_normal.png";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new PageView(
        children: <Widget>[
          new DetailPage("首页", "开发中，敬请期待..."),
          new DetailPage("助手", "开发中，敬请期待..."),
          new DetailPage("我的", "开发中，敬请期待..."),
        ],
        controller: pageController,
        onPageChanged: onPageChanged,
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: Container(
        height: 100.0,
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.bottomCenter,
              child: BottomNavigationBar(
                fixedColor: Colors.blue,
                items: [
                  BottomNavigationBarItem(
                      icon: Icon(Icons.home), title: Text('首页')),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.accessibility_new), title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.person), title: Text('我的')),
                ],
                onTap: onTap,
                currentIndex: tabIndex,
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding: const EdgeInsets.only(bottom: 10.0),
                child: InkWell(
                  child: new Image.asset(
                    bigImage,
                    width: 80.0,
                    height: 80.0,
                  ),
                  onTap: onBigImageTap,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    pageController = PageController(initialPage: this.tabIndex);
  }

  @override
  void dispose() {
    pageController.dispose();
    super.dispose();
  }

  void onTap(int index) {
    pageController.animateToPage(index,
        duration: const Duration(milliseconds: 300), curve: Curves.ease);
  }

  //添加图片的点击事件
  void onBigImageTap() {
    setState(() {
      this.tabIndex = 1;
      this.bigImage = 'assets/icons/ic_nav_tweet_actived.png';
      onTap(1);
    });
  }

  void onPageChanged(int tabIndex) {
    setState(() {
      this.tabIndex = tabIndex;
      if(tabIndex==1) {
        this.bigImage = 'assets/icons/ic_nav_tweet_actived.png';
      } else {
        this.bigImage = 'assets/icons/ic_nav_tweet_normal.png';
      }
    });
  }
}
